<template>

	<div class="Bottom">		
		<a v-for='k in arr' :href="k.path"  >
			<em :class="'iconfont'+' '+k.class"></em>	
			{{k.word}}
		</a>		
	</div>
</template>

<script>
	
	export default{
		name:'Bottom',
		data(){
			return {
				arr:[{'path':'#/','class':'icon-shouye','word':'首页'},{'path':'#/Llist','class':'icon-fenlei','word':'分类'},{'path':'#/shopping','class':'icon-icon---copy','word':'购物车'},{'path':'#/usergeren','class':'icon-wode','word':'我的'}]
			}
		},
		mounted(){			
			$(function(){
				$('.Bottom a').click(function() {
				$('.Bottom a').css("color",'gray');
				$(this).css("color",'red')
				});
			})
		}
	}


	
</script>

<style scoped>
.Bottom{
	width: 100%;
	height: 4rem;
	line-height: 2rem;
	display: flex;
	justify-content: space-around;
	background: white;
	border-top:1px solid gray ;
	position: fixed;
	bottom: 0;
	z-index: 999;
}
.Bottom a{
	display: block;
	padding-top:0.3rem ;
	width: 20%;
	height: 100%;
	color: gray;
	text-align: center;	
}
em{
	display: block;
	font-size: 1.7rem;
}
a:nth-of-type(1){
	color:red;
}
</style>